<template>
	<sys-container :label="'我的订单'" :withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="orderList" style="width:100%;padding:5rpx 20rpx">
					<view class="singleOrder" v-for="(item,index) in payOrder" :key="index"
						style="display:flex;align-items: center;border-bottom: 2rpx solid #ccc;justify-content: space-around;padding:20rpx 0;width:100%">
						<view class="" style="font-size: 25rpx;width:100%;padding:20rpx 30rpx">
							<view class=""
								style="display: flex;align-items: flex-end;justify-content: space-between;margin-bottom: 20rpx;">
								<text style="font-size:36rpx">{{item.order_title||123}}</text>
								<text v-if="!item.is_comment" @tap="toComment(item)">立即评价</text>
								<text v-else>我已评价</text>
							</view>
							<view class="">
								开始时间：{{formatTime(item.start_time,'yyyy-MM-dd HH:mm:ss')}}
							</view>
							<view class="">
								结束时间：{{formatTime(item.pay_time,'yyyy-MM-dd HH:mm:ss')}}
							</view>
							<view class="">
								<text>开通时间：{{formatTime(item.pay_time,'yyyy-MM-dd HH:mm:ss')}}</text>
								<view class="" style="float:right">
									{{item.is_buy?'微信购买':'管理开通'}}
								</view>
							</view>

						</view>



					</view>
				</view>


				<u-mask :show="commentData.id">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:100%;background: #fff;overflow: auto;padding:20rpx	;">
							<view class="">
								请输入您的评价
							</view>
							
								<u-rate label="评分" v-model="commentData.satisfied_score" @change="onChange" />
									
								<u-field v-model="commentData.comment" label="评价内容" type="textarea" @change="changeInput"
									placeholder="请输入评价内容" autosize />
							</van-cell-group>
							<view class="">
								图片
							</view>
							<view >
								<u-upload :file-list="commentData.pics" multiple @after-read="afterRead" max-count="9"/>
							</view>
							<view class="drawArea" style="display: flex;align-items:center;justify-content: space-between;width: 100%;">
								<u-button  color="#D10202" :custom-style="{width:'260rpx',background:'#D10202',color:'#fff'}" @click="doComment">确定</u-button>
								<u-button @click="cancel" :custom-style="{width:'260rpx'}" >取消</u-button>
							</view>
						</view>
					</view>
				</u-mask>
			</view>
		</template>
	</sys-container>
</template>

<script>
	const app = getApp()
	import {
		orderList,addComment
	} from '@/globalApi/requestApi.js'
	import {
		formatTime
	} from '@/util/index.js'
	export default {
		data() {
			return {
				payOrder: [],
				addCommentId: null,
				commentData: {
					id: null,
					satisfied_score: 5,
					comment:'',
					pics:[]
				},
				formatTime
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			doComment(){
				if(!this.commentData.comment){
					uni.showToast({
						title:'请输入评价内容！',
						icon:'none'
					})
					return
				}
				
				addComment(this.commentData).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'评价成功！',
							icon:'success'
						})
						this.cancel()
						this.getList()
					}
				})
			},
			cancel(){
				this.commentData.id = null
				this.commentData.pics = []
				this.commentData.comment = ''
				this.commentData.satisfied_score=5
			},
			afterRead(event){
				console.log(event)
				const { file } = event.detail;
				file.forEach(function(tempFile) {
				            // 多文件上传需要借助Promise.all的执行力，所以利用Promise封装上传功能
				            const p = new Promise(function (resolve, reject) {
				                uni.uploadFile({
				                    url: app.globalData.requestUrl+'/wap/auth_api/uploadImg', // 上传的资源url
				                    filePath: tempFile.url, // 要上传文件资源的路径（本地路径）
				                    name: 'file', // 上传的文件名，后台解析文件需要用的参数名
									files:tempFile,
				                    // formData: {
				                    //     file: tempFile// 其他表单数据
				                    // },
				                    // 成功后执行resolve，将对应的结果数据传递给外部的then
				                    success: function (res) {
				                        console.log('上传结果', res);
				                        const data = JSON.parse(res.data);
				                        resolve(data);
				                    },
				                    // 失败后执行reject，将error信息传递给外部的catch
				                    fail: function (err) {
				                        console.error('上传失败', err);
				                        reject(err);
				                    }
				                });
				            });
				            pList.push(p);
				        });
			},
			onChange(e) {
				this.commentData.satisfied_score = e.detail
			},
			changeInput(e){
				this.commentData.comment = e.detail
			},
			toComment(data) {
				this.commentData.id = data.member_ship_id
			},
			getList() {
				orderList(null).then(res => {
					if (res.code == 200) {
						this.payOrder = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #F6F6F6;

		.info {
			width: 100%;
			text-align: center;
			background: #fff;
			padding: 26rpx 0;
			box-sizing: border-box;

		}

		.packageList {
			width: 100%;
			margin-top: 40rpx;

			.packType {
				width: 100%;

				.typeTit {
					text-align: center;
					font-size: 40rpx;
					font-weight: bold;
					color: #222222;
				}

				.typeMain {
					width: 100%;
					padding: 0 40rpx;
					box-sizing: border-box;

					.pic {
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}
</style>